<template>
    <!-- 分页器 -->
    <div class="block">
        <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage2"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="50"
        layout=" prev, pager, next, sizes,jumper"
        :total="totalpage">
        </el-pagination>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    props:{
        totalpage:Number,
        currentPage2:Number,
        pagelimit:Number
    },
    data(){
        return{
            // currentPage2: 1,    //分页器当前页
            // pagelimit:10,   //每页显示
            // totalpage:300,  //总页数
        }
    },
    methods:{
        // 分页器打印
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.$emit('send-pagelimit',val)
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.$emit('send',val)
        },
    },
}
</script>

<style lang="scss" scoped>
    // 分页
    .block{
        display: flex;
        justify-content: end;
        ::v-deep .el-pagination__sizes{
            margin-left: 10px;
            width: 80px;
            height: 35px;
            line-height: 35px;
        }
        ::v-deep .btn-prev,::v-deep .el-pager li,::v-deep .btn-next{
            width: 35px;
            height: 35px;
            line-height: 35px;
            background-color: #fff;
            border: 1px solid rgba(228, 228, 228, 1);
        }
        ::v-deep .el-pager .active{
            background-color: #0079fe !important;
        }
        ::v-deep .el-pager .active:hover{
            color: #fff !important;
            border: 1px solid rgb(228, 228, 228) !important;
            box-sizing: border-box;
        }
        ::v-deep .el-pager li:hover,::v-deep .btn-prev:hover,::v-deep .btn-next:hover,::v-deep  .el-pagination__sizes .el-input .el-input__inner:hover {
            border-color: #0079fe;
            color: #0079fe;
        }
        ::v-deep .el-input--mini .el-input__inner,::v-deep .el-input--mini .el-input__icon {
            height: 35px;
            line-height: 35px;
        }
        ::v-deep .el-pagination .el-select .el-input {
            width: 86px;
            margin: 0 5px;
        }
        ::v-deep .el-pagination__jump{
            height: 35px;
            line-height: 35px;
        }
        ::v-deep .el-input__inner:focus {
            border-color: rgb(228, 228, 228) !important;
            outline: 0;
        }
    }
</style>